<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 可以通过子传父，父传子的方式 -->
    <!-- https://blog.csdn.net/amanda_wmy/article/details/80134823 -->
    
    <!-- 组件之间尽量要小写吧 -->
    <!-- 
      props传递的数据类型:
        字符串
        数值
        布尔值
        数组
        对象
     -->
    <menus :pstr="pstr" :pnum="12" :pboo="true" hao="大大" :parr="parr" :pobj="pobj"></menus>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let menus = {
      "props": ["pstr", "pnum", "pboo", "hao", "parr", "pobj"],
      data(){
        return {
          "msg": "这是第一个组件的了"
        }
      },
      "methods": {},
      "template": `
    <div>
      <div>{{pstr}}</div>
      <div>{{pnum}}</div>
      <div>{{pboo}}</div>
      <div>{{hao}}</div>
      <div>
        <ul>
          <li v-for="(items,index) in parr" :key="index">{{items}}</li>
        </ul>
      </div>
      <div>
        <span>{{pobj.name}}</span>
        <span>{{pobj.sex}}</span>
        <span>{{pobj.age}}</span>
      </div>
    </div>`
    };
    const vm = new Vue({
      "el": "#app",
      "data": {
        "pstr": "这是字符串",
        "parr": ["这", "是", "数", "组", "形", "式"],
        "pobj": {
          "name": "list",
          "sex": "gender",
          "age": 18,
        }
      },
      mounted() {},
      updated() {},
      "methods": {},
      "directives": {},
      "computed": {},
      "watch": {},
      "filters": {},
      "components": {
        menus
      }
    });
  </script>

</body>

</html>